<template>
	<view class="refundde" v-if="DetailObj">
		<!-- 头部 -->
		<view class="hearder">
			<view class="title">{{DetailObj.status}}</view>
			<view class="hear-box">
				<view class="txt-box" v-if="DetailObj.desc"><text class="txt">回复内容：</text> {{DetailObj.desc || ''}}
				</view>
				<view class="txt-box" v-else><text class="txt">实现退金：</text> <text
						class="price">￥{{DetailObj.refund_money || ''}}
					</text> 微信支付原路返回
				</view>
				<view class="txt-box" v-if="DetailObj.status === '待审核'"><text class="txt">据系统默认退款还剩:</text>{{redtime}}
				</view>
				<view class="txt-box"><text class="txt">处理时间：</text>{{DetailObj.refusetime || ''}}</view>
			</view>
		</view>
		<!-- 中 -->
		<view class="main">
			<view class="main-left">
				<view class="texter leftitle">退款信息</view>
				<view class="texter">退款类型</view>
				<view class="texter">申退金额</view>
				<view class="texter">实退金额</view>
				<view class="texter">申请时间</view>
			</view>
			<view class="main-right">
				<view class="texter rightitle">{{DetailObj.type || ''}}</view>
				<view class="texter">￥{{DetailObj.order_amount_total || ''}}</view>
				<view class="texter">￥{{DetailObj.refund_money}} 微信支付原路退回</view>
				<view class="texter">{{DetailObj.createtime || ''}}</view>
			</view>

		</view>
		<!-- 下 -->
		<view class="bom">
			<view class="bom-left">
				<view class="texter leftitle">订单信息</view>
				<view class="texter">服务内容</view>
				<view class="texter">订单编号</view>
				<view class="texter">实际支付</view>
				<view class="texter">下单时间</view>
			</view>
			<view class="bom-right">
				<view class="texter rightitle">{{DetailObj.product || ''}}</view>
				<view class="texter">{{DetailObj.order_no}}</view>
				<view class="texter">￥ {{DetailObj.order_amount_total}}</view>
				<view class="texter">{{DetailObj.order_time}}</view>
			</view>
		</view>
	</view>
	<!-- 空白页组件 -->
	<Blankpage v-else></Blankpage>
</template>

<script>
	import { RefundDetail } from '@/untils/api.js'
	import { toDate } from '@/untils/gettime.js'
	import { Blankpage } from '@/components/Blankpage/Blankpage.vue'
	export default {
		components: {
			Blankpage
		},
		data() {
			return {
				DetailObj: {},
				redObj: {
					id: ''
				},
				redtime: ''
			}
		},
		onLoad(option) {
			this.redObj.id = option.id
			this.countime(option.redtime)
			this.getRefundDetail()
		},
		methods: {
			async getRefundDetail() {
				const { data: res } = await RefundDetail(this.redObj)
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.DetailObj = res.data
				console.log(res, '退款详情');
				this.DetailObj.order_time = toDate(res.data.order_time, 1)
				this.DetailObj.createtime = toDate(res.data.createtime, 1)

				if (res.data.refusetime) {
					this.DetailObj.refusetime = toDate(res.data.refusetime, 1)
				} else {
					this.DetailObj.refusetime = '等待处理'
				}

				if (this.DetailObj.type == 1) {
					this.DetailObj.type = '全额退款'
				} else {
					this.DetailObj.type = '部分退款'
				}

				if (this.DetailObj.status == 1) {
					this.DetailObj.status = '待审核'
				} else if (this.DetailObj.status == 2) {
					this.DetailObj.status = '审核拒绝'
				} else if (this.DetailObj.status == 3) {
					this.DetailObj.status = '待到账'
				} else if (this.DetailObj.status == 4) {
					this.DetailObj.status = '已到账'
				}

			},
			// 倒计时
			countime(data) {
				let endtime = new Date(data).getTime() // 结束时间

				let timer = setInterval(() => {
					let nowtime = new Date().getTime() //获取现在时间
					let time = Math.ceil((endtime - nowtime) / 1000) // 时间差

					let d = parseInt(time / (60 * 60 * 24)); // 天
					let h = parseInt(time / 60 / 60 % 24) // 时
					let m = parseInt(time / 60 % 60) // 分
					let s = parseInt(time % 60) // 秒
					this.redtime = d + '天' + h + '时' + m + '分' + s + '秒'
					if (time <= 0) {
						clearInterval(timer)
						return this.redtime = ''
					}
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.refundde {
		background-color: #F1F2F6;

		// 上
		.hearder {
			overflow: hidden;
			padding: 0 32rpx;
			padding-bottom: 51rpx;
			background-color: #fff;

			.title {
				font-size: 34rpx;
				font-weight: 700;
				text-align: center;
				margin: 74rpx 0 60rpx;
			}

			.hear-box {
				background-color: #F8F9FB;
				border-radius: 2rpx;
				padding: 41rpx 34rpx;
				font-size: 22rpx;

				.txt {
					color: #858A8D;
				}

				.txt-box {
					margin-bottom: 20rpx;

					.price {
						color: #FE8220;
						margin-right: 10rpx;
					}
				}

			}
		}

		// 公共
		.main,
		.bom {
			padding: 34rpx 32rpx 15rpx;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			background-color: #fff;
		}

		.texter {
			margin-bottom: 20rpx;
		}

		.leftitle {
			font-weight: 600;
		}

		.rightitle {
			margin-top: 55rpx;
		}

		.main-right,
		.bom-right {
			text-align: right;
		}

		// 中
		.main {
			margin: 18rpx 0;
		}


	}
</style>
